<template>
    <div class="content">
        <div class="leftbar">
            <ul>
                <li
                    v-for="item in tabArr"
                    :class="currentTab == item.tag ? 'activeTab' : ''"
                    @click="handleTab(item.tag)"
                >{{ item.title }}</li>
            </ul>
        </div>
        <div class="rightbar">
            <ul>
                <li v-for="item in goodList" :key="item.id">
                    <div class="imgbox">
                        <img src="http://www.dell-lee.com/imgs/vue3/near.png"  />
                    </div>
                    <div class="rightInfo">
                        <div class="title">{{ item.title }}</div>
                        <div class="sell">{{ item.sell }}</div>
                        <div class="bottomfa">
                            <div class="priceBox">
                                <span class="nowPrice">&yen;{{ item.price }}</span>
                                <span class="prevPrice">{{ item.oldPrice }}</span>
                            </div>
                            <div class="action">
                                <div class="minus btn" @click="handleCart(item,shopId,-1)"></div>
                                <span>{{getProductCartCount(shopId,item.id)}}</span>
                                <div class="plus btn" @click="handleCart(item,shopId,1)">+</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref ,  } from "@vue/reactivity";
import {defineProps} from 'vue';
import type {PropType} from 'vue';
import { watchEffect } from "@vue/runtime-core";
import  type {Tag,Good,NearbyItem} from '../types/types'
import {get} from "../utils/require"
import {useRoute} from 'vue-router'
import {useStore} from 'vuex'

const props = defineProps({
    item: {
        type: Object as PropType<NearbyItem>,
        required: true
    }
})


const route = useRoute()
const store = useStore()
const shopId = ref("" as any)
const state = reactive({
    tabArr: [] as Tag[],
    goodList: [] as Good[],
    cartList:[] as Record<string,any>
})
const currentTab = ref("all")
const getData = async (tab:string) =>{
   const tabRes =  await get("/api/tagList");
    if(tabRes.code==0){
        state.tabArr = tabRes.data
    }
    const goodRes = await get(`/api/goodList/${tab}`)
 
    if(goodRes.code==0){
        state.goodList = goodRes.data
        state.cartList = store.state.cartList
    }
    
}
watchEffect(()=>{    
    shopId.value = route.params.id
    getData(currentTab.value)
})

const handleTab = (tag: string) => {
    // console.log(tag);
    currentTab.value = tag
}
//显示数量
const getProductCartCount = (shopId:any,id:number)=>{    
    return state.cartList?.[shopId]?.productList?.[id]?.count || 0
}

//加入购物车
const handleCart = (item:Good,shopId:string | string[],num:number) => { 
    const shopName = props.item.title
    console.log("shopName",shopName);
    store.commit("changeCart",{item,shopId,num,shopName})
    state.cartList = store.state.cartList
}





const { tabArr, goodList } = toRefs(state)
</script>

<style scoped lang="scss">
.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.5rem;
    bottom: 0.5rem;
    display: flex;
    // background-color: #eee;
    .leftbar {
        width: 0.76rem;
        background-color: #f5f5f5;
        ul {
            margin: 0;
            height: 100%;
            overflow-y: scroll;
            li {
                color: #333333;
                text-align: center;
                font-size: 0.14rem;
                padding: 0.12rem 0;
            }
            .activeTab {
                background-color: #fff;
            }
        }
    }
    .rightbar {
        margin: 0 0.18rem 0 0.16rem;
        flex: 1;

        ul {
            flex: 1;
            margin: 0;
            overflow-y: scroll;
            height: 100%;
            li {
                display: flex;
                padding-bottom: .12rem;
                margin-bottom: .12rem;
                border-bottom: 1px solid #F1F1F1;
                &:last-child{
                    margin-bottom: 0;
                }
                .imgbox {
                    width: 0.68rem;
                    height: 0.68rem;
                    margin-right: 0.16rem;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .rightInfo {
                    flex: 1;
                    .title {
                        font-size: 14px;
                        color: #333333;
                        margin-bottom: .06rem;
                    }
                    .sell {
                        color: #333333;
                        margin-bottom: .06rem;
                    }
                    .bottomfa {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .priceBox {
                            display: flex;
                            align-items: center;
                            .nowPrice {
                                font-size: 14px;
                                color: #e93b3b;
                                margin-right: .08rem;
                            }
                            .prevPrice {
                                font-size: 10px;
                                color: #999999;
                                text-decoration: line-through;                            }
                        }
                        .action {
                            display: flex;
                            align-items: center;
                            
                            .btn{
                                border-radius: 50%;
                                width:.2rem;
                                height: .2rem;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: .2rem;
                                box-sizing: content-box;
                            }
                            .minus {
                                border: 1px solid #666666;
                                color: #666666;
                                &::after{
                                    content: "";
                                    border:.01rem solid #666;
                                    width: .06rem;
                                }
                            }
                            span {
                                font-size: 14px;
                                color: #333333;
                                margin: 0 .08rem;
                            }
                            .plus {
                                color: #fff;
                                background: #0091ff;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
